import './App.css';
import Search from './components/HomePage/SearchBar';
import navBar from './components/common/Header.js';
import footer from './components/common/Footer.js';
function App() {
return (
<div>
<navBar />
<h1>headd</h1>
<footer />
</div>
)
}
export default App;
This is my App.js the element is visible on the page, But not the navBar and footer.
Here's the Header.js file which exports navBar
export function navBar(){
return(
<div>
<div>
<ul className="navbar">
<li><h3>FindTheFlat</h3></li>
<li><a href="default.asp">LOGIN/SIGN-UP</a></li>
</ul>
</div>
</div>
)
}
The navBar is getting exported but isn't being used even after calling Need help on this.
I believe the reason is that you called your component with a lowercase name.
navBar and it should be Navbar.
the reason for that is that React will be confused between the custom component JSX and HTML elements
for your referance
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.
See more here: https://reactjs.org/docs/components-and-props.html
So, React not use your user-defined component (<navBar />, <footer />). It uses instead DOM tags